<template>
  <div class="user-box">
    <div class="user-box-left">
      <el-avatar @click="toSpace(item.userId)" :src="item.userAvatar" :size="86"></el-avatar>
    </div>
    <div class="user-box-right">
      <div class="nickname" @click="toSpace(item.userId)">{{ item.nickname }}</div>
      <div class="introduction">{{ item.personalSignature === null ||item.personalSignature === '' ?
          "这个人没有填简介啊~~~": item.personalSignature}}</div>
      <div class="care_status">
        <el-button type="primary" style="width: 100px" v-if="item.hasCare === 1" @click="cancelCare(item)">已关注</el-button>
        <el-button type="primary" style="width: 100px" v-else-if="item.hasCare === 2" @click="cancelCare(item)">已互粉</el-button>
        <el-button type="primary" style="width: 100px" v-else @click="careIt(item)">+关注</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>

import {ElMessage} from "element-plus";
import {careUP, noCare} from "@/api/api.js";
import {reactive} from "vue";

const toSpace = (id) => {
  // router.push({
  //   name:'home',
  //   params:{
  //     id
  //   }
  // })
  window.open("/space/home/"+id,"_blank")
}

// 关注表单
const careForm = reactive({
  fansId:0,
  upId:0
})

/**
 * 关注用户
 * @param item
 * @returns {Promise<void>}
 */
const careIt = async (item) => {
  careForm.fansId = localStorage.getItem("userId");
  careForm.upId = item.userId
  const res = await careUP(careForm);
  if(res.code === 200){
    item.hasCare = 1
    ElMessage.success("关注成功")
  }
}



/**
 * 取消关注
 * @param item
 * @returns {Promise<void>}
 */
const cancelCare = async (item) => {
  careForm.fansId = localStorage.getItem("userId");
  careForm.upId = item.userId
  const res = await noCare(careForm)
  console.log(res)
  if(res.code === 200){
    item.hasCare = 0;
    ElMessage.success("取消关注")
  }
}

const props = defineProps({
  item:{
   type:Object,
   default:{}
  }
})
</script>
<style lang="scss" scoped>
.user-box{
  display: flex;
  .user-box-left{
    width: 86px;
    height: 86px;
    margin:0 20px 20px 0;
    cursor: pointer;
  }
  .user-box-right{
    .nickname{
      cursor: pointer;
      color: black;
      font-weight: bold;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
    }
    .introduction{
      color:var(--gray-font-color--);
      height:25px;
      font-size: 13px;
    }
  }
}
</style>